<template>
	<view class="product-con">
		<view>
			<!-- 轮播图 -->
			<product-con-swiper :img-urls="banner"></product-con-swiper>
			<!-- 商品信息描述 -->
			<view class="wrapper">
				<view class="share acea-row row-between row-bottom">
					<view class="money font-color-red">
						<text class="num">{{ businessDetail.titleName }}</text>
					</view>
				</view>
				<view class="introduce">{{ businessDetail.titleInfo }}</view>
				<view class="label acea-row row-between-wrapper">
					<text>{{ businessDetail.browse || 0 }} 人观看</text>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="product-nav">
				<view class="item" :class="stateNav == 0 ? 'active' : ''" @click="stateNavBtn(0)">课件详情</view>
				<view class="item" :class="stateNav == 1 ? 'active' : ''" @click="stateNavBtn(1)">章节信息</view>
			</view>
			<view class="product-intro" v-if="stateNav == 0">
				<view class="conter" v-html="description"></view>
			</view>

			<view class="chapter-intro" v-else>
				<!-- <view class="item" v-for="(item, index) in businessDetailData" :key="index" @click.stop="curriculumDetail(item)"> -->
				<view class="item" v-for="(item, index) in businessDetailData" :key="index" @click.stop="playVideo(item)">
					<view class="item_row">
						{{index+1}}、{{item.titleName}}
					</view>
					<view class="lockhead" v-if="((userInfo.level < item.singular) ||(userInfo.isAuth==1))">
						<text class="iconfont icon-quanxianguanlisuozi"></text>
					</view>
					<view class="lockhead" v-if="((userInfo.level >= item.singular && item.videoUrl) ||(userInfo.isAuth==1))" @click.stop="playVideo(item)">
						<text class="iconfont icon-youjian"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" >
			<text class="text_span" v-if="businessDetail.singular != 1">升级</text>
			<text class="text_span" v-if="businessDetail.singular != 1">{{ businessDetail.singular == 2 ? '会员' :businessDetail.singular == 3 ? '团长' : '联营公司'}}</text>
			<text class="text_span">免费观看</text>
			<text class="text_ks">(共{{ businessDetailData.length }}课时)</text>
		</view>
		
		<view class="footer" v-if="businessDetail.id ==13 ||businessDetail.id ==15 ||
		businessDetail.id ==18 ||businessDetail.id ==19">
			<text class="text_span" v-if="userInfo.isAuth !=1">请联系客服开通观看权限</text>
			<text class="text_span" v-if="userInfo.isAuth==1">已开通权限,可免费观看</text>
			<text class="text_ks">(共{{ businessDetailData.length }}课时)</text>
		</view>
	</view>
</template>

<script>
	import ProductConSwiper from "@/components/ProductConSwiper";
	import StorePoster from "@/components/StorePoster";
	import cookie from "@/utils/store/cookie";
	import {
		imageBase64,
		getBusinessDetailData
	} from "@/api/public";
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "BusinessDetail",
		components: {
			ProductConSwiper
		},
		data: function() {
			return {
				id: '',
				shareInfoStatus: false,
				posterData: {
					image: "",
					title: "",
					price: "",
					code: "",
				},
				posterImageStatus: false,
				businessDetail: {},
				businessDetailData: [],
				banner: [],
				description: '',
				state: false,
				stateNav: 1
			};
		},
		computed: mapGetters(["isLogin", "location", "userInfo"]),
		onShow() {
			this.id = this._route.query.id;
			if (this._route.query.spread) {
				let urlSpread = this._route.query.spread
				cookie.set("spread", urlSpread)
			}
			this.lodINdexData()
			
			
			if (!this.$store.getters.token) {
				this.$yrouter.reLaunch({
					path: "/pages/authorization/index"
				});
			}else this.$store.dispatch('getUser', true)
		},
		methods: {
			lodINdexData() {
				let that = this;
				getBusinessDetailData(this.id).then((res) => {
					that.$set(that, "businessDetailData", res.data.yxBusinessDetailList)
					that.$set(that, "businessDetail", res.data.title)
					that.banner = res.data.title.sliderImage.split(',');
					that.description = res.data.title.description.replace(
						/\<img/gi,
						'<img style="max-width:100%;height:auto;"'
					);
					console.log(res.data)
				});
			},
			
			onShareAppMessage: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: "pages/BusinessDetail/index?id=" + this.id + '&spread=' + uni.getStorageSync("uid"),
				};
			},
			stateNavBtn(index) {
				let _index = index
				if (this.stateNav == index) {
					return
				} else {
					this.stateNav = index
				}
			},
			curriculumDetail(item) {
				if (this.userInfo.level < item.singular) {
					uni.showModal({
						title: '温馨提示',
						content: '你当前等级不能查看该课程！！！',
						success: function(res) {
							if (res.confirm) {} else if (res.cancel) {}
						}
					});
					return
				} else {
					this.$yrouter.push({
						path: '/pages/businessAudio/index',
						query: {
							id: item.id
						}
					});
				}
			},
			
			playVideo(item){
				console.log(item)
				console.log(this.userInfo)
				if(this.userInfo.isAuth ==1){
					this.$yrouter.push({
						path: '/pages/activity/ShortVideo/playVideo/index',
						query: {
							url: item.videoUrl
						}
					});
				}else{
					if(item.businessTitleId ==13 ||item.businessTitleId ==15 ||item.businessTitleId ==18 ||
					item.businessTitleId ==19){
						if(this.userInfo.isAuth ==0){
							uni.showModal({
								title: '温馨提示',
								content: '未授权,请联系客服开通观看权限！！！',
								success: function(res) {
									if (res.confirm) {} else if (res.cancel) {}
								}
							});
							return
						}
					}
					if (this.userInfo.level < item.singular) {
						uni.showModal({
							title: '温馨提示',
							content: '你当前等级不能查看该课程！！！',
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {}
							}
						});
						return
					} else {
						this.$yrouter.push({
							path: '/pages/activity/ShortVideo/playVideo/index',
							query: {
								url: item.videoUrl
							}
						});
					}
				}
				
				
			},
		},
	};
</script>


<style lang="less">
	.product-bg {
		height: 415rpx !important
	}

	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.labelNav {
		width: 100%;
		height: 76rpx;
		background-color: #f5f5f5;
		display: table;

		.item {
			display: table-cell;
			vertical-align: middle;
			height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			color: #8c8c8c;

			text {
				font-size: 28rpx;
			}
		}
	}

	.wrapper {
		margin-bottom: 0;

		.introduce {
			font-weight: 400 !important;
			font-size: 28rpx !important;
			color: #333;
		}

		.share {
			.money {
				.num {
					font-size: 32rpx !important;
					color: #000000;
				}
			}

			.iconfont {
				text-align: center;
				position: relative;

				.shareButton {
					font-size: 28rpx;
					display: block;
					position: absolute;
					right: -10rpx;
					top: 45rpx;
					width: 60rpx;
				}
			}
		}
	}

	.product-nav {
		width: 100%;
		height: 65rpx;
		display: table;
		table-layout: fixed;
		padding: 25rpx 100rpx;
		box-sizing: border-box;

		.item {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			height: 100%;
			color: #999999;
			font-size: 32rpx;
		}

		.active {
			color: #ff3334;
			font-weight: bold;
		}
	}

	.product-nav .item:nth-child(2) {
		border-left: #ccc solid 2rpx;
	}

	.product-intro {
		margin-top: 0;
	}

	.chapter-intro {
		width: 100%;
		height: auto;
		overflow: hidden;
		background-color: #FFFFFF;
		padding: 0 50rpx 100rpx 50rpx;

		.item {
			height: 80rpx;
			width: 100%;
			position: relative;
			border-bottom: #e8e8e8 solid 1rpx;

			.item_row {
				height: 100%;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #333;
			}

			.lockhead {
				height: 50rpx;
				width: 50rpx;
				text-align: center;
				line-height: 47rpx;
				border-radius: 100rpx;
				background-color: #FF3334;
				color: #FFFFFF;
				position: absolute;
				top: 15rpx;
				right: 10rpx;


				text {
					font-size: 30rpx;
				}
			}
		}
	}

	.product-con {
		.footer {
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;

			.text_span {
				color: #ff3334;
				font-size: 36rpx;
			}

			.text_ks {
				font-size: 30rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}



	.product-con .store-info {
		margin-top: 0.2 * 100rpx;
		background-color: #fff;
	}

	.product-con .store-info .title {
		padding: 0 0.3 * 100rpx;
		font-size: 0.28 * 100rpx;
		color: #282828;
		height: 0.8 * 100rpx;
		line-height: 0.8 * 100rpx;
		border-bottom: 0.01 * 100rpx solid #f5f5f5;
	}

	.product-con .store-info .info {
		padding: 0 0.3 * 100rpx;
		height: 1.26 * 100rpx;
	}

	.product-con .store-info .info .picTxt {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.product-con .store-info .info .picTxt .pictrue {
		width: 0.76 * 100rpx;
		height: 0.76 * 100rpx;
		margin-right: 0.2 * 100rpx;
	}

	.product-con .store-info .info .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 0.06 * 100rpx;
	}

	.product-con .store-info .info .picTxt .text {
		flex: 1;
	}

	.product-con .store-info .info .picTxt .text .name {
		font-size: 0.3 * 100rpx;
		color: #282828;
	}

	.product-con .store-info .info .picTxt .text .address {
		font-size: 0.24 * 100rpx;
		color: #666;
		margin-top: 0.03 * 100rpx;
	}

	.product-con .store-info .info .picTxt .text .address .iconfont {
		color: #707070;
		font-size: 0.18 * 100rpx;
		margin-left: 0.1 * 100rpx;
	}

	.product-con .store-info .info .picTxt .addressBox {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.product-con .store-info .info .picTxt .addressBox .iconfont {
		font-size: 0.4 * 100rpx;
	}

	.product-con .store-info .info .picTxt .addressBox .addressTxt {
		font-size: 0.24 * 100rpx;
		color: #eb3729;
	}

	.product-con .store-info .praise {
		font-size: 0.28 * 100rpx;
		color: #808080;
	}

	.product-con .store-info .praise .iconfont {
		font-size: 0.28 * 100rpx;
	}

	.product-con .superior {
		background-color: #fff;
		margin-top: 0.2 * 100rpx;
	}

	.product-con .superior .title {
		height: 0.98 * 100rpx;
	}

	.product-con .superior .title image {
		width: 0.3 * 100rpx;
		height: 0.3 * 100rpx;
	}

	.product-con .superior .title .titleTxt {
		margin: 0 0.2 * 100rpx;
		font-size: 0.3 * 100rpx;
		background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
		background-image: -webkit-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
		background-image: -moz-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.product-con .superior .slider-banner {
		width: 6.9 * 100rpx;
		margin: 0 auto;
		padding-bottom: 0.2 * 100rpx;
	}

	.product-con .superior .slider-banner .list {
		width: 100%;
		padding-bottom: 0.2 * 100rpx;
	}

	.product-con .superior .slider-banner .list .item {
		width: 2.15 * 100rpx;
		margin: 0 0.22 * 100rpx 0.3 * 100rpx 0;
		font-size: 0.26 * 100rpx;
	}

	.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
		margin-right: 0;
	}

	.product-con .superior .slider-banner .list .item .pictrue {
		width: 100%;
		height: 2.15 * 100rpx;
	}

	.product-con .superior .slider-banner .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 0.06 * 100rpx;
	}

	.product-con .superior .slider-banner .list .item .name {
		color: #282828;
		margin-top: 0.12 * 100rpx;
	}

	.product-con .superior .slider-banner .swiper-pagination-bullet {
		background-color: #999;
	}

	.product-con .superior .slider-banner .swiper-pagination-bullet-active {
		background-color: #e93323;
	}

	.mask {
		-webkit-filter: blur(2px);
		-moz-filter: blur(2px);
		-ms-filter: blur(2px);
		filter: blur(2px);
	}



	.product-con .product-intro .conter view {
		width: 100% !important;
	}

	.generate-posters {
		width: 100%;
		height: 1.7 * 100rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		transform: translate3d(0, 100%, 0);
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		-moz-transform: translate3d(0, 100%, 0);
		-o-transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		-o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	}

	.generate-posters.on {
		transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
	}

	.generate-posters .item {
		flex: 50%;
		-webkit-flex: 50%;
		-ms-flex: 50%;
		text-align: center;
	}

	.generate-posters .item .iconfont {
		font-size: 0.8 * 100rpx;
		color: #5eae72;
	}

	.generate-posters .item .iconfont.icon-haibao {
		color: #5391f1;
	}

	.noscroll {
		height: 100%;
		overflow: hidden;
	}
</style>
